// 函数封装
import { createVNode, render } from 'vue'
import Message from './message'
export function message ({ type, text }) {
  // 组件的渲染逻辑
  // 思路：
  // 1. 需要把封装Message组件通过createVnode方法创建为虚拟dom
  // 2. 寻找一个组件的挂载点(在哪个dom中渲染出来)
  // 3. 调用render函数完成在特定的挂载点下实现虚拟dom渲染为真实dom
  const vnode = createVNode(Message, { type, text })
  // 以动态创建元素的方式生成一个挂载点
  const container = document.createElement('div')
  document.body.appendChild(container)
  // 挂载
  render(vnode, container)

  //  显示1.5s之后自动隐藏
  setTimeout(() => {
    // render(null, container)
    container.remove()
  }, 1500)
}

// 函数式调用组件
// 1. 改装思路 三步走
// 2. 优势  灵活 想在什么时候调用组件就在什么时候调用不用跟着模板渲染走
